<template>
	<view>

		<gameBasics backgroundColor="rgba(0,0,0,0)" />
		<view class="bg">

		</view>
		<view class="" style="display: flex;width:75vw;margin: 0 auto;padding: calc(20vmin / 7.5) 0pt;">
			<view class="ranking_list">
				<view class="title">
					<view class="">
						{{rank.length?'总排行':'排行榜'}}
					</view>
				</view>
				<block v-if="!rank.length">
					<view class="ranking_item" :style="{background:index?'#fff':'#FED194'}"
						v-for="(item ,index) in activ_list">
						<view class="ranking">
							<image v-if="!index" src="../../static/crown.png" mode=""></image>
							<text v-else>{{index+1}}</text>
						</view>
						<image :src="item.team.pic" mode=""></image>
						<text class="name">
							{{item.team.title||''}}
						</text>
						<text class="num">{{activ_det.type!=9?item.number:''}}</text>
						<view class="clue">
							<u-icon name="file-text-fill" color="#000" size="calc(50vmin / 7.5)"></u-icon>
							<text>x{{item.clues_num}}</text>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="ranking_item" :style="{background:!item.champion?'#fff':'#FED194'}"
						v-for="(items ,indexs) in rank">
						<view class="ranking">
							<image v-if="item.champion" src="../../static/crown.png" mode=""></image>
							<text v-else>{{indexs+1}}</text>
						</view>
						<image :src="items.team_pic" mode=""></image>
						<text class="name">
							{{items.team_title||''}}
						</text>
						<text class="num"></text>
						<view class="clue" v-if="!item.cluse_num&&false">
							<u-icon name="file-text-fill" color="#000" size="calc(50vmin / 7.5)"></u-icon>
							<text>x{{items.cluse_num}}</text>
						</view>
					</view>
				</block>


				<image src="../../static/game/ranking_bg.png" mode="aspectFit"></image>
			</view>

			<view class="btn" v-if="game_type!=1&&gameData.is_one!=1">
				<view class="title_" v-if="activ_list[0].clues_num&&code!=204&&userPeople.cap_zt!=2">
					等待队长查看线索...
				</view>
				<view class="game_btn" @click="nav()" v-if="activ_list[0].clues_num&&userPeople.cap_zt==2&&code!=204">
					<view class="">

					</view>
					查看线索
					<image src="../../static/look.png" mode=""></image>
				</view>
				<view class="game_btn" @click="restart" v-if="gameData.team==1&&gameData.user_id==userPeople.user_id&&code!=204">
					<view class="">
					</view>
					重新挑战
					<image src="../../static/continue.png" mode=""></image>
				</view>
				<block v-if="!rank.length">
					<view class="game_btn" v-if="gameData.user_id==userPeople.user_id" @click="whetherRest(1)">
						<view class="">

						</view>
						继续挑战
						<image src="../../static/continue.png" mode=""></image>
					</view>
				</block>

				<view class="game_btn" v-else-if="gameData.user_id==userPeople.user_id" @click="decode">
					<view class="">

					</view>
					进入解密
					<image src="../../static/continue.png" mode=""></image>
				</view>
				<view class="game_btn" @click="whetherRest(2)" v-if="gameData.user_id==userPeople.user_id">
					<view class="">
					</view>
					休息一下
					<image src="../../static/rest.png" mode=""></image>
				</view>

			</view>
			<view class="timeText"  v-if="game_type==1&&num>=0">
				{{num}}s 后自动关闭
			</view>
		</view>
		<gameLoading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activ_list: [],
				activ_det: {},
				gameData: {},
				userPeople: {},
				userData: {},
				rank: [],
				code: 202,
				acceptStatus: true,
				game_type: 2,
				num: 10
			}
		},
		// computed:{
		// 	activ_list(){
		// 		return this.activ_list.some(item=>item.)
		// 	}
		// },
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
		},
		onShow() {
			this.$nextTick(() => {
				this.$store.commit('switchGame', {
					code: false
				})
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},

		onLoad() {
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			let activ_list = []

			let time = setInterval(() => {
				this.num--
				if (this.game_type == 1 && this.num < 0) {
					clearInterval(time)
					return;
					this.$myRuquestWs('home/game/game_end_bingo_s', {
						game_id: this.gameData.id
					}, 'POST').then(res => {

					})
				}

			}, 1000)
			uni.$on('onMessage', (res) => {
				if(!this.acceptStatus) return;
					this.code = res.data.code
					this.gameData = res.data.game
					this.activ_det = res.data.activ_det
					this.rank = res.data.rank
					this.teamList = res.data.team
					this.userPeople = res.data.userPeople
					this.game_type = res.data.game_type
			
					if (!res.data.activ_list) {
						activ_list = res.data.rank||[]
						activ_list.forEach(item => {
							item.number = item.cluse_num + '次'
						})

					} else {
						activ_list = res.data.activ_list
						// let code=this.activ_det.type==1||this.activ_det.type==3
						activ_list.forEach(item => {
							if (item.clues_num == activ_list[0].clues_num) item.champion = true
							if (this.activ_det.type == 1 || this.activ_det.type == 3) {
								item.number = this.$util.timeFormat(item.number)
							} else {
								item.number += '分'
							}
						})
					}
					this.activ_list = activ_list

			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
					if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		}, 
		methods: {
			whetherRest(type) {
				this.$util.knock()
				this.$myRuquestWs('home/game/game_status', {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					type
				}, 'POST').then(res => {
											return;
					if (!this.activ_det.name&&type!=2) { 

						this.decode()
					}
				})
			},
			restart() {
				this.$util.knock()
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId
				}
				this.$myRuquestWs('home/game/game_afresh', data)
			},
			decode() {
				this.$util.knock()
				this.$myRuquestWs('home/game/game_decry_go', {
					game_id: this.gameData.id
				})
			},
			nav() {
				this.$util.knock()
				uni.navigateTo({
					url: './clue?game_id=' + this.gameData.id + '&team_id=' + this.userPeople.teamId +
						'&activ_id=' + this.gameData.activ_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-image: linear-gradient(to bottom, #FED194, #fff);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.title_ {
		font-size: calc(28vmin / 7.5);
		color: #333;
		text-align: center;
	}

	.ranking_list {
		// background-color: #000000;
		// box-shadow: 6upx 6upx 1upx rgba(0, 0, 0, 0.48);
		border-radius: calc(16vmin / 7.5);
		padding: calc(15vmin / 7.5) calc(30vmin / 7.5);
		height: calc(100vh - calc(70vmin / 7.5));
		position: relative;

		.title {
			padding-top: calc(80vmin / 7.5);
			padding-bottom: calc(20vmin / 7.5);

			color: #DD9D3A;
			font-size: calc(48vmin / 7.5);
			font-weight: 700;

			view {
				margin: 0 auto;
				width: calc(220vmin / 7.5);
			}
		}

		>image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}

		>.ranking_item:nth-child(3) {
			transform: scale(.96);
			margin-bottom: calc(6vmin / 7.5);
		}

		>.ranking_item:nth-child(4) {
			transform: scale(.92);
			margin-bottom: calc(3vmin / 7.5);
		}

		>.ranking_item:nth-child(5) {
			transform: scale(.88);
			margin-bottom: 0;
		}

		.ranking_item {
			display: flex;
			padding: calc(15vmin / 7.5) calc(34vmin / 7.5);
			align-items: center;
			border-radius: calc(20vmin / 7.5);
			margin-bottom: calc(12vmin / 7.5);

			.ranking {
				font-size: calc(48vmin / 7.5);
				color: #DD9D3A;

				image {
					height: calc(50vmin / 7.5);
					width: calc(60vmin / 7.5);
				}
			}

			>image {
				width: calc(85vmin / 7.5);
				height: calc(85vmin / 7.5);
				border-radius: 50%;
				margin-left: calc(30vmin / 7.5);
				margin-right: calc(20vmin / 7.5);
			}

			.name {
				width: calc(200vmin / 7.5);
				font-size: calc(28vmin / 7.5);
				color: #333;
				font-weight: 700;
			}

			.num {
				width: calc(120vmin / 7.5);
				font-size: calc(30vmin / 7.5);
				color: #333;
				font-weight: 700;
			}

			.clue {
				display: flex;
				width: calc(80vmin / 7.5);
			}
		}
	}

	.btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.game_btn {
			padding: 0;
			width: calc(284vmin / 7.5);

			image {
				width: calc(34vmin / 7.5);
				height: calc(26vmin / 7.5);
				margin-left: calc(16vmin / 7.5);
			}
		}
	}

	.timeText {
		position: absolute;
		bottom: calc(20vmin / 7.5);
		right: calc(20vmin / 7.5);
		font-size: calc(24vmin / 7.5);
		padding: calc(4vmin / 7.5) calc(10vmin / 7.5);

		height: calc(40vmin / 7.5);
		background-color: rgba(0, 0, 0, .23);
		border-radius: calc(40vmin / 7.5);
		line-height: calc(40vmin / 7.5);
		text-align: center;
		color: #ffffff;

	}
</style>
